<template>
	<view>
		<u-navbar :is-back="false" title="" :border-bottom="false">
			<view class="slot-wrap">
				<view class="back" @click="navTo('back')">
					<view class="iconfont iconfanhui" :style="{'padding-top': paddingTop}"></view>
					<view class="text">返回</view>
				</view>
				<view class="set">绑定手机号</view>
				<view class="save" @click="navTo('save')">保存</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="item">
				<view class="left">手机号</view>
				<view class="right">
					<view>
						<input class="uni-input" placeholder="请输入手机号码" placeholder-style="color:#b4b4b4"  v-model="mobile" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">手机验证</view>
				<view class="right">
					<view style="display: flex;align-items: center;">
						<input class="uni-input" placeholder="请输入验证码" placeholder-style="color:#b4b4b4" v-model="code" />
						<u-verification-code start-text="发送验证码" :seconds="seconds" @end="end" @start="start" ref="uCode" 
								@change="codeChange"></u-verification-code>
						<u-button class="btn" @tap="getCode">{{tips}}</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMemberInfo, bindMobile, wxBindMobile } from '../../api/userApi.js'
	import { sendCode } from '../../api/globalApi.js'
	export default {
		data() {
			return {
				tips: '',
				mobile: '',
				code: '',
				seconds: 10,
				paddingTop: '2rpx',
				memberInfo: {mobile: ''},
				isLogin: true,
				userInfo: {}
			}
		},
		onLoad() {
			if(uni.getSystemInfoSync().platform != "ios") {
				this.paddingTop = '8rpx'
			}
			this.userInfo = uni.getStorageSync('userInfo')
			console.log(this.userInfo)
			// this._getMemberInfo()
		},
		computed: {
			phone() {
				return this.memberInfo.mobile.slice(0,3) + '****' + this.memberInfo.mobile.slice(7) || ''
			}
		},
		methods: {
			async _getMemberInfo() {
				const res = await getMemberInfo()
				console.log(res)
				if (res.data.code === 3) {
					console.log('未登录')
					this.isLogin = false
				} else {
					this.memberInfo = res.data.data
				}
			},
			async navTo(data) {
				if (data === 'back') {
					uni.navigateBack()
				} else if (data === 'save'){
					if (!this.mobile) return this.$u.toast('请输入手机号')
					if (!this.$utils.regTel(this.mobile)) return this.$u.toast('请输入正确的手机号')
					if (!this.code) return this.$u.toast('请输入验证码')
					uni.showLoading({title: '请稍后'})
					let data = {
						openid: this.userInfo.openId,
						mobile: this.mobile-0,
						code: this.code-0,
						nickname: this.userInfo.nickName,
						avatar: this.userInfo.avatarUrl,
						avatar: this.userInfo.avatarUrl,
						unionid: this.userInfo.unionId,
						province: this.userInfo.province,
						city: this.userInfo.city
					}
					console.log(data)
					const res = await wxBindMobile(data)
					console.log(res)
					this.$u.toast('保存成功')
					// #ifdef APP-PLUS
					this.$IM.login({userId:res.data.data.member.id + '',userSig:res.data.data.sin},(ret)=>{
						console.log('IM登录',ret);
					});
					// #endif
					uni.setStorageSync('user',res.data.data)
					uni.setStorageSync('token',res.data.data.token)
					uni.setStorageSync('isLogin', true)
					uni.setStorageSync('isRefresh', true)
					setTimeout(() => {
						uni.switchTab({url: '/pages/user/user'})
					}, 1500)
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.isLogin) return this.$u.toast('未登录')
				if (!this.mobile) return this.$u.toast('请输入手机号')
				if (!this.$utils.regTel(this.mobile)) return this.$u.toast('请输入正确的手机号')
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(async () => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						const res = await sendCode({mobile: this.mobile-0,channel: 1})
						console.log(res)
						this.$u.toast('验证码已发送')
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start()
					}, 1000)
				} else {
					this.$u.toast('倒计时结束后再发送')
				}
			},
			end() {
				// this.$u.toast('倒计时结束')
			},
			start() {
				this.$u.toast('发送成功')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
		.back {
			display: flex;
			font-size: 32rpx;
			.iconfanhui {
				font-weight: bold;
				font-size: 36rpx;
				padding-top: 2rpx;
			}
		}
		.set {
			display: flex;
			margin-left: 24%;
			font-weight: bold;
			font-size: 32rpx;
		}
		.save {
			margin-left: auto;
			font-size: 32rpx;
		}
	}
	.content {
		
		.item {
			background-color: #fff;
			display: flex;
			font-size: 28rpx;
			color: #1c222a;
			padding: 0 30rpx;
			height: 110rpx;
			align-items: center;
			.left {
				font-weight: 800;
				font-size: 28rpx;
			}
			.right {
				display: flex;
				align-items: center;
				margin-left: auto;
				color: #b4b4b4;
				font-size: 28rpx;
				.uni-input {
					text-align: right;
				}
				.btn {
					width: 176rpx;
					height: 68rpx;
					font-size: 28rpx;
					color: #fff;
					background-color: #271666;
					margin-left: 20rpx;
					border: none;
				}
			}
			&:first-child {
				margin: 30rpx 0;
			}
			&:active {
				// background-color: #f9f9f9;
			}
			&:nth-child(2),&:nth-child(3),&:nth-child(4) {
				border-bottom: 1px solid #f9f9f9;
			}
		}
	}
</style>
